<template>
  <div class="bg-gray-800 rounded-lg p-4">
    <h3 class="text-lg font-medium mb-4">选择模型</h3>
    
    <div class="space-y-2">
      <div v-if="apiConfigs.length === 0" class="text-center p-4 bg-gray-700 rounded-lg">
        <p class="text-gray-400">暂无可用模型，请先添加API配置</p>
      </div>
      
      <div 
        v-for="config in apiConfigs" 
        :key="config.id" 
        @click="selectModel(config)"
        :class="[
          'flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors',
          selectedConfigId === config.id ? 'bg-gray-700 ring-2 ring-[#8153ff]' : 'hover:bg-gray-700'
        ]"
      >
        <div class="flex items-center">
          <div 
            class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
            :class="config.iconBg || 'bg-gray-600'"
          >
            <span class="text-xs text-white">{{ config.iconText || 'AI' }}</span>
          </div>
          <div>
            <div class="font-medium">{{ config.name || config.modelName || config.provider || '未命名模型' }}</div>
            <div class="text-xs text-gray-400">{{ config.description || getDefaultDescription(config) }}</div>
          </div>
        </div>
        
        <div v-if="selectedConfigId === config.id" class="text-[#8153ff]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
    </div>
    
    <div class="mt-6">
      <button 
        @click="openModelConfig"
        class="w-full py-2 text-center bg-gray-700 hover:bg-gray-600 rounded-lg text-white transition-colors flex items-center justify-center"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        添加自定义模型
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue';

const emit = defineEmits(['select-model', 'open-model-config']);

// API配置列表
const apiConfigs = ref([]);

// 当前选中的配置ID
const selectedConfigId = ref(null);

// 在组件挂载时加载已保存的API配置
onMounted(() => {
  loadApiConfigs();
  
  // 读取上次选中的配置ID
  const savedConfigId = localStorage.getItem('selectedApiConfigId');
  if (savedConfigId) {
    selectedConfigId.value = savedConfigId;
  }
});

// 从localStorage加载API配置列表
const loadApiConfigs = () => {
  const apiConfigsStr = localStorage.getItem('apiConfigs');
  if (apiConfigsStr) {
    try {
      const configs = JSON.parse(apiConfigsStr);
      apiConfigs.value = configs;
      console.log('加载的API配置列表:', configs);
      
      // 如果有配置但没有选中的配置ID，默认选中第一个
      if (configs.length > 0 && !selectedConfigId.value) {
        selectedConfigId.value = configs[0].id;
      }
    } catch (e) {
      console.error('解析API配置失败:', e);
      apiConfigs.value = [];
    }
  }
};

// 为模型生成默认描述
const getDefaultDescription = (config) => {
  if (config.provider === 'openai') {
    return 'OpenAI API';
  } else if (config.provider === 'anthropic') {
    return 'Anthropic API';
  } else if (config.provider === 'google') {
    return 'Google AI API';
  } else if (config.provider.includes('minimax')) {
    return 'MiniMax API';
  } else if (config.provider.includes('claude')) {
    return 'Claude API';
  } else {
    return config.providerName || config.provider || '自定义模型';
  }
};

// 选择模型
const selectModel = (config) => {
  selectedConfigId.value = config.id;
  localStorage.setItem('selectedApiConfigId', config.id);
  emit('select-model', config);
};

// 打开模型配置
const openModelConfig = () => {
  emit('open-model-config');
};
</script>

<style scoped>
</style> 